---
title: Mise à niveau de votre dApp pour RainbowKit v2
description: RainbowKit et Wagmi ont été promus à la version v2
image: guide-rainbowkit-v2.png
---

# Migration vers RainbowKit et Wagmi v2

Les dépendances [wagmi](https://wagmi.sh) et [viem](https://viem.sh) ont atteint la version `2.x.x` avec des changements significatifs.

Suivez les étapes ci-dessous pour effectuer la migration.

**1. Mettez à jour RainbowKit, `wagmi`, et `viem` à leurs dernières versions**

```bash
npm i @rainbow-me/rainbowkit wagmi viem@2.x
```

**2. Installez la dépendance `@tanstack/react-query`**

Avec Wagmi v2, [TanStack Query](https://tanstack.com/query/v5/docs/react/overview) est désormais une dépendance requise.

Installez-la avec la commande suivante :

```bash
npm i @tanstack/react-query
```

**3. Mettez à jour vos configurations RainbowKit et Wagmi**

```diff
  import '@rainbow-me/rainbowkit/styles.css'

+ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
- import { createPublicClient, http } from 'viem'
- import { WagmiConfig } from 'wagmi'
+ import { WagmiProvider, http } from 'wagmi'
- import { configureChains, createConfig } from 'wagmi'
  import { mainnet } from 'wagmi/chains'
  import { RainbowKitProvider } from '@rainbow-me/rainbowkit'
- import { getDefaultWallets, connectorsForWallets } from '@rainbow-me/rainbowkit'
+ import { getDefaultConfig } from '@rainbow-me/rainbowkit'

  /* getDefaultWallets is now optional */
- const { wallets } = getDefaultWallets({
-   appName: 'RainbowKit demo',
-   projectId: 'YOUR_PROJECT_ID',
-   chains,
- })

  /* connectorsForWallets is now optional */
- const connectors = connectorsForWallets([...wallets])

- const { chains, publicClient } = configureChains( 
-   [mainnet, sepolia], 
-   [publicProvider(), publicProvider()],
- )

- const config = createConfig({
-   autoConnect: true,
-   publicClient,
- })

  /* New API that includes Wagmi's createConfig and replaces getDefaultWallets and connectorsForWallets */
+ const config = getDefaultConfig({
+   appName: 'RainbowKit demo',
+   projectId: 'YOUR_PROJECT_ID',
+   chains: [mainnet],
+   transports: {
+     [mainnet.id]: http(),
+   },
+ })

+ const queryClient = new QueryClient()

  const App = () => {
    return (
-     <WagmiConfig config={config}>
+     <WagmiProvider config={config}>
+       <QueryClientProvider client={queryClient}>
-         <RainbowKitProvider chains={chains}>
+         <RainbowKitProvider>
            {/* Your App */}
          </RainbowKitProvider>
+       </QueryClientProvider>
-     </WagmiConfig>
+     </WagmiProvider>
    )
  }
```

**4. Vérifiez les changements importants dans `wagmi` et `viem`**

Si vous utilisez les hooks `wagmi` et les actions `viem` dans votre dApp, vous devrez suivre les guides de migration pour v2 :

- [Guide de migration Wagmi v2](https://wagmi.sh/react/guides/migrate-from-v1-to-v2)
- [Changements Incompatibles Viem v2](https://viem.sh/docs/migration-guide#2xx-breaking-changes)

#### Changements de RainbowKit

**1. Comportement amélioré pour les portefeuilles EIP-6963**

Les portefeuilles qui prennent en charge la nouvelle norme de connexion EIP-6963 (y compris Rainbow, MetaMask et autres) apparaîtront automatiquement dans une section `Installé` lors de l'expérience de connexion au portefeuille. Cela garantit que les utilisateurs puissent toujours trouver leurs portefeuilles préférés et se connecter aux dApps sans conflits ni boutons de secours.

Les développeurs conservent un contrôle total sur la Liste de Portefeuilles Personnalisée pour mettre en avant les portefeuilles préférés des utilisateurs finaux. Il est conseillé de continuer à inclure le `injectedWallet` et `walletConnectWallet` dans votre liste pour prendre en charge toutes les plateformes.

**2. Configuration Wagmi avec getDefaultConfig**

Cette nouvelle API simplifie l'expérience de configuration et remplace la nécessité d'utiliser directement le `createConfig` de Wagmi. La configuration de chaîne est simplifiée, y compris les fournisseurs publics déduits pour les `transports`.

La liste de portefeuilles par défaut sera automatiquement incluse, supprimant ainsi le besoin d'utiliser `getDefaultWallets` et `connectorsForWallets`.

Vous pouvez créer une Liste de portefeuilles personnalisés en passant des connecteurs de portefeuille importés ou personnalisés à `wallets`. L'instanciation des connecteurs de portefeuille et le passage de `projectId` et `chains` ne sont plus nécessaires.

```
const config = getDefaultConfig({
  appName: 'RainbowKit demo',
  projectId: 'YOUR_PROJECT_ID',
  chains: [mainnet],
  wallets: [rainbowWallet], /* optional custom wallet list */
  /* Wagmi createConfig options including `transports` are also accepted */
})
```

**3. RainbowKitProvider**

Vous n'avez plus besoin de passer `chains` à `<RainbowKitProvider>`.

```diff
- <RainbowKitProvider chains={chains}>
+ <RainbowKitProvider>
```

**4. Chaînes personnalisées**

Le type `Chain` a changé conformément à Wagmi v2, et continue de prendre en charge les métadonnées `iconUrl` et `iconBackground` de RainbowKit.

```diff
+ import { Chain } from '@rainbow-me/rainbowkit'

  const avalanche = {
    id: 43_114,
    name: 'Avalanche',
    iconUrl: 'https://s2.coinmarketcap.com/static/img/coins/64x64/5805.png',
    iconBackground: '#fff',
    nativeCurrency: { name: 'Avalanche', symbol: 'AVAX', decimals: 18 },
    rpcUrls: {
      default: { http: ['https://api.avax.network/ext/bc/C/rpc'] },
    },
    blockExplorers: {
      default: { name: 'SnowTrace', url: 'https://snowtrace.io' },
    },
    contracts: {
      multicall3: {
        address: '0xca11bde05977b3631167028862be2a173976ca11',
        blockCreated: 11_907_934,
      },
    },
  } as const satisfies Chain
```

Exemple avec `getDefaultConfig` :

```diff
const config = getDefaultConfig({
+ chains: [
+   avalanche, /* custom chain */
+   {
+     ...mainnet,
+     iconBackground: '#000',
+     iconUrl: 'https://example.com/icons/ethereum.png',
+   }, /* metadata overrides */
+ ],
});
```

Exemple avec `createConfig` :

```diff
+ import { Chain } from '@rainbow-me/rainbowkit'
+ const chains: readonly [Chain, ...Chain[]] = [
+   {
+     ...mainnet,
+     iconBackground: '#000',
+     iconUrl: 'https://example.com/icons/ethereum.png',
+   },
+ ];
  const config = createConfig({
    chains,
    transports: {
      [mainnet.id]: http(),
    },
  })
```

**5. Portefeuilles personnalisés**

Les connecteurs de portefeuilles RainbowKit ont subi des changements importants pour supporter Wagmi v2. Référez-vous aux [docs mis à jour](https://www.rainbowkit.com/docs/custom-wallets) et à un [exemple de connecteur](https://github.com/rainbow-me/rainbowkit/tree/main/packages/rainbowkit/src/wallets/walletConnectors/rainbowWallet/rainbowWallet.ts) pour mettre à jour tout Connecteur de Portefeuille Personnalisé dans votre dApp.

Les connecteurs de portefeuille prennent également désormais en charge la norme EIP-6963 avec la propriété `rdns`. Assurez-vous que cela soit rempli pour éviter les duplications de références aux portefeuilles prenant en charge EIP-6963 dans votre liste de portefeuilles.

> Veuillez signaler tout problème ou commentaire pour RainbowKit v2 sur GitHub [ici](https://github.com/rainbow-me/rainbowkit/issues/new/choose).
